// webpack配置文件

//1.引入的模块
let path = require("path");
const glob = require("glob"); // node内置glob模块 主要用于解析路径
//引入htmlwebpackplugins插件
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); // 提取css
const OptimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin"); // 压缩css

/* 自动加载所有页面JS作为入口 */
//定义一个js模块对象
let entry = {};
//获取所有模块的js文件路径----找到所有页面目录中的js文件
let entryJs = glob.sync("./src/pages/*/*.js");
//遍历数组--拼接entry键值对
entryJs.map((v) => {
  let chunksName = path.basename(v, ".js"); //把文件名 后缀.js去掉  ad.js===>ad
  //拼接
  entry[chunksName] = v;
});

/* 自动打包所有页面 */
//定义一个所有页面的数组
let pageArr = [];
//获取所有pages中的html
let pageHtml = glob.sync("./src/pages/*/*.html");
//遍历拼接每一个页面 插件
pageHtml.forEach((v) => {
  //处理数据
  //把拼接好的html 放到数组中
  pageArr.push(
    new HtmlWebpackPlugin({
      template: v, //开发页面模板
      filename: path.basename(v), //输出到dist中的名字
      chunks: [path.basename(v, ".html")], //配置当前页所需要的模块
    })
  );
});

//2.暴露5大核心
module.exports = {
  //1.entry
  // entry: './src/index.js',//单入口

  //老做法-多入口----配置所有页面中需要使用的模块(一个js文件就是一个模块)
  //语法:  key:value   此处的key 相当于模块名  value就是指定模块的地址

  entry,
  //2.output
  output: {
    path: path.resolve(__dirname, "dist"), //设置输出目录
    filename: "js/[name]-[hash:16].js", //输出的静态文件名
    publicPath: "./",
  },
  //3.loader
  module: {
    //规则
    rules: [
      //处理css
      {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader, // 提取css
            options: {
              publicPath: "../", // 资源查找路径
            },
          },
          "css-loader",
        ],
      },
      //处理less
      {
        test: /\.less$/, // 匹配所有.less文件
        use: [
          {
            loader: MiniCssExtractPlugin.loader, // 提取css
            options: {
              publicPath: "../", // 资源查找路径
            },
          }, // 创建style标签 把css插入html的head内
          "css-loader", // 解析加载css到js中（把css打成字符串）。
          "less-loader", // 编译less为css
        ],
      },
      //处理css中的img
      {
        test: /\.(jpg|png|gif)$/,
        loader: "url-loader", //使用哪个加载器
        options: {
          //配置加载器其它规则
          name: "[hash:10].[ext]", // 图片输出的名字hash长度16位 默认32位
          limit: 10 * 1024, // 限制图像大小 小于10kb base64处理 如大于10kb,不处理
          // 关闭url-loader的es Module  使用commonjs module解析 , url-loader默认使用es6模块化解析 而后续使用 html-loader 引入图片是 commonjs解析  不关闭会报错
          esModule: false,
          outputPath: "img", // 图片输出文件夹
        },
      },
      //处理html中的img
      {
        test: /\.html$/, // 处理html中引入img
        loader: "html-loader",
      },
      //处理字体图标
      {
        test: /\.(eot|svg|ttf|woff|woff2)$/, // 处理字体格式文件
        loader: "file-loader",
        options: {
          name: "[hash:16].[ext]", // 输出名字
          outputPath: "fonts", // 输出路径（输出到文件夹fonts中）
        },
      },
      //ES6转ES5
      {
        test: /\.js$/,
        loader: "babel-loader", // loader 编译es6为es5
        exclude: /node_modules/, // 排除 node_modules
      },
      {
        test: /\.mp4|mov$/,
        loader: "file-loader"
      }
    ],
  },
  //4.plugins
  plugins: [
    // 打包html
    //语法:  new 插件名({是一个对象,表示配置插件的选项})
    // 提取css，把css中打包的js中提取出来成为独立文件
    new MiniCssExtractPlugin({
      // 提取css
      filename: "css/[name].css", // 输出到css文件夹里
    }),

    new OptimizeCssAssetsWebpackPlugin(), // 压缩css
  ].concat(pageArr),

  //5.mode
  mode: process.env.NODE_ENV,

  //6.开发服务器
  devServer: {
    contentBase: path.resolve(__dirname, "dist"), // 启动服务器目录
    compress: true, // 启动gzip
    port: 8848, // 端口 具有唯一性,同一个端口号,不能多次启动,不能使用常用端口: 5500 80 8080  3306  3000  设置时不推荐使用1000以内数字
    open: true, // 自动打开服务
    publicPath: "/", // 静态资源查找路径
    openPage: "myhome.html", // 默认打开的页面
  },
  target: "web", // 目标是浏览器
};
